<!DOCTYPE html>
<html>
<head>
<title>Circuit Diagram</title>
</head>
<body>
<canvas id="circuitCanvas" width="550" height="420"></canvas>
<script>
    const canvas = document.getElementById('circuitCanvas');
    const ctx = canvas.getContext('2d');

    // Style settings
    ctx.lineWidth = 2;
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.font = '20px Arial';
    ctx.textAlign = 'left';
    ctx.textBaseline = 'middle';

    // Component coordinates
    const leftWireX = 150;
    const rightWireX = 350;
    const topWireY = 50;
    const bottomWireY = 350;

    // --- Draw Wires ---
    ctx.beginPath();
    // Top wire
    ctx.moveTo(leftWireX, topWireY);
    ctx.lineTo(rightWireX, topWireY);
    // Bottom wire
    ctx.moveTo(leftWireX, bottomWireY);
    ctx.lineTo(rightWireX, bottomWireY);
    // Left wire segments
    ctx.moveTo(leftWireX, topWireY);
    ctx.lineTo(leftWireX, 170);
    ctx.moveTo(leftWireX, 230);
    ctx.lineTo(leftWireX, bottomWireY);
    // Right wire segments
    ctx.moveTo(rightWireX, topWireY);
    ctx.lineTo(rightWireX, 90); // to top of fixed resistor
    ctx.moveTo(rightWireX, 150); // from bottom of fixed resistor
    ctx.lineTo(rightWireX, 190); // to top of thermistor
    ctx.moveTo(rightWireX, 250); // from bottom of thermistor
    ctx.lineTo(rightWireX, bottomWireY);
    ctx.stroke();

    // --- Draw Battery ---
    const batteryX = leftWireX;
    const batteryCenterY = 200;
    // Positive terminal (long)
    ctx.beginPath();
    ctx.moveTo(batteryX - 30, batteryCenterY - 20);
    ctx.lineTo(batteryX + 30, batteryCenterY - 20);
    ctx.stroke();
    // Negative terminal (short)
    ctx.beginPath();
    ctx.moveTo(batteryX - 15, batteryCenterY + 20);
    ctx.lineTo(batteryX + 15, batteryCenterY + 20);
    ctx.stroke();
    // Dashed line for cell separator
    ctx.beginPath();
    ctx.setLineDash([5, 3]);
    ctx.moveTo(batteryX - 15, batteryCenterY);
    ctx.lineTo(batteryX + 15, batteryCenterY);
    ctx.stroke();
    ctx.setLineDash([]); // Reset line dash
    // Battery Label
    ctx.fillText('6.0 V', batteryX - 90, batteryCenterY);

    // --- Draw Fixed Resistor ---
    const resistorX = rightWireX;
    const resistorTopY = 90;
    const resistorHeight = 60;
    const resistorWidth = 30;
    ctx.strokeRect(resistorX - resistorWidth / 2, resistorTopY, resistorWidth, resistorHeight);
    // Resistor Label
    ctx.fillText('1.2 k\u03A9', resistorX + 25, resistorTopY + resistorHeight / 2);

    // --- Draw Thermistor ---
    const thermistorTopY = 190;
    const thermistorHeight = 60;
    const thermistorWidth = 30;
    // Box
    ctx.strokeRect(resistorX - thermistorWidth / 2, thermistorTopY, thermistorWidth, thermistorHeight);
    // Diagonal line
    ctx.beginPath();
    ctx.moveTo(resistorX - thermistorWidth / 2, thermistorTopY + thermistorHeight);
    ctx.lineTo(resistorX + thermistorWidth / 2, thermistorTopY);
    ctx.stroke();

    // --- Draw Voltmeter and Connections ---
    const topJunctionY = resistorTopY + resistorHeight + 20; // Midpoint between components
    const bottomJunctionY = thermistorTopY + thermistorHeight;
    const voltmeterCenterX = rightWireX + 100;
    const voltmeterCenterY = (topJunctionY + bottomJunctionY) / 2;
    const voltmeterRadius = 25;

    // Junction points (dots)
    ctx.beginPath();
    ctx.arc(rightWireX, topJunctionY, 4, 0, 2 * Math.PI);
    ctx.fill();
    ctx.beginPath();
    ctx.arc(rightWireX, bottomJunctionY, 4, 0, 2 * Math.PI);
    ctx.fill();

    // Connection wires to voltmeter
    ctx.beginPath();
    ctx.moveTo(rightWireX, topJunctionY);
    ctx.lineTo(voltmeterCenterX, topJunctionY);
    ctx.lineTo(voltmeterCenterX, voltmeterCenterY + voltmeterRadius); // Connect to bottom of V
    
    ctx.moveTo(rightWireX, bottomJunctionY);
    ctx.lineTo(voltmeterCenterX - 50, bottomJunctionY);
    ctx.lineTo(voltmeterCenterX - 50, voltmeterCenterY - voltmeterRadius); // connect to top of V - adjusted for clarity
    ctx.stroke();
    
    // The previous connection logic was a bit confusing, let's redraw it more simply like the image
    ctx.clearRect(rightWireX + 1, topJunctionY - 1, 150, bottomJunctionY - topJunctionY + 2); // clear previous wires
    ctx.beginPath();
    // Top connection
    ctx.moveTo(rightWireX, topJunctionY);
    ctx.lineTo(voltmeterCenterX, topJunctionY);
    ctx.lineTo(voltmeterCenterX, voltmeterCenterY - voltmeterRadius);
    // Bottom connection
    ctx.moveTo(rightWireX, bottomJunctionY);
    ctx.lineTo(voltmeterCenterX, bottomJunctionY);
    ctx.lineTo(voltmeterCenterX, voltmeterCenterY + voltmeterRadius);
    ctx.stroke();


    // Voltmeter circle
    ctx.beginPath();
    ctx.arc(voltmeterCenterX, voltmeterCenterY, voltmeterRadius, 0, 2 * Math.PI);
    ctx.stroke();

    // 'V' inside voltmeter
    ctx.font = '24px Arial';
    ctx.textAlign = 'center';
    ctx.fillText('V', voltmeterCenterX, voltmeterCenterY);

    // --- Draw Figure Label ---
    ctx.font = 'bold 20px Arial';
    ctx.textAlign = 'center';
    ctx.fillText('Fig. 9.1', canvas.width / 2, bottomWireY + 40);

</script>
</body>
</html>